{extend name="common/main"}

{block name="css"}
{/block}

{block name="body"}
<body data-type="widgets">
{include file="common/index"}
<div class="tpl-content-wrapper">
    <div class="row-content am-cf">
        <div class="row">
            <div class="am-u-sm-12 am-u-md-12 am-u-lg-12">
                <h3>报警统计</h3>
                <form action="" style="padding-bottom: 10px;padding-left: 10px">

                    <div class="col-md-12">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">设备名：</label>
                            <select class="form-control" name="" style="padding: 1px">
                                <option value="a">选择全部</option>
                                <option value="a">李晟灏</option>
                                <option value="b">李晟灏</option>
                                <option value="o">李晟灏</option>
                            </select>

                            <input type="text"  placeholder="开始时间" data-am-datepicker  id="my-start-2"  style="margin-left: 15px"/>
                            到
                            <input type="text"  placeholder="结束时间" data-am-datepicker  id="my-end-2"/>
                            <button type="button" class="am-btn am-btn-primary am-radius" style=" padding: .3em 1em;">查询</button>
                            <button type="button" class="am-btn am-btn-primary am-radius" style=" padding: .3em 1em;float: right">导出Excel</button>
                        </div>
                    </div>
                </form>
                <div class="widget am-cf">
                    <div class="am-u-sm-12">
                        <table width="100%" class="am-table am-table-compact am-table-striped tpl-table-black " id="example-r">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>时间</th>
                                <th>低电报警</th>
                                <th>断电报警</th>
                                <th>震动报警</th>
                                <th>求救报警</th>
                                <th>进电子栅栏</th>
                                <th>出电子栅栏</th>
                                <th>位移报警</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr class="gradeX">
                                <td>1</td>
                                <td>2017-04-27 10:10:30 - 2017-04-29 10:10:00</td>
                                <td>3</td>
                                <td>0</td>
                                <td>0</td>
                                <td>0</td>
                                <td>2</td>
                                <td>2</td>
                                <td>0</td>
                            </tr>
                            <tr class="gradeX">
                                <td>1</td>
                                <td>2017-06-01 18:10:00 - 2017-06-29 10:00:00</td>
                                <td>10</td>
                                <td>2</td>
                                <td>1</td>
                                <td>0</td>
                                <td>15</td>
                                <td>14</td>
                                <td>2</td>
                            </tr>
                            <tr class="gradeX">
                                <td>1</td>
                                <td>2017-09-25 19:00:30 - 2017-09-29 10:00:00</td>
                                <td>3</td>
                                <td>1</td>
                                <td>1</td>
                                <td>1</td>
                                <td>4</td>
                                <td>4</td>
                                <td>1</td>
                            </tr>
                            <!-- more data -->
                            </tbody>
                        </table>
                    </div>
                    <div class="am-u-lg-12 am-cf">

                        <div class="am-fr">
                            <ul class="am-pagination tpl-pagination">
                                <li class="am-disabled"><a href="#">«</a></li>
                                <li class="am-active"><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li><a href="#">»</a></li>
                            </ul>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
</body>
{/block}
{block name="js"}
<script>
    $(function() {
        var nowTemp = new Date();
        var nowDay = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0).valueOf();
        var nowMoth = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), 1, 0, 0, 0, 0).valueOf();
        var nowYear = new Date(nowTemp.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();
        var $myStart2 = $('#my-start-2');

        var checkin = $myStart2.datepicker({
            onRender: function(date, viewMode) {
                // 默认 days 视图，与当前日期比较
                var viewDate = nowDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = nowMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = nowYear;
                        break;
                }

                return date.valueOf() < viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            if (ev.date.valueOf() > checkout.date.valueOf()) {
                var newDate = new Date(ev.date)
                newDate.setDate(newDate.getDate() + 1);
                checkout.setValue(newDate);
            }
            checkin.close();
            $('#my-end-2')[0].focus();
        }).data('amui.datepicker');

        var checkout = $('#my-end-2').datepicker({
            onRender: function(date, viewMode) {
                var inTime = checkin.date;
                var inDay = inTime.valueOf();
                var inMoth = new Date(inTime.getFullYear(), inTime.getMonth(), 1, 0, 0, 0, 0).valueOf();
                var inYear = new Date(inTime.getFullYear(), 0, 1, 0, 0, 0, 0).valueOf();

                // 默认 days 视图，与当前日期比较
                var viewDate = inDay;

                switch (viewMode) {
                    // moths 视图，与当前月份比较
                    case 1:
                        viewDate = inMoth;
                        break;
                    // years 视图，与当前年份比较
                    case 2:
                        viewDate = inYear;
                        break;
                }

                return date.valueOf() <= viewDate ? 'am-disabled' : '';
            }
        }).on('changeDate.datepicker.amui', function(ev) {
            checkout.close();
        }).data('amui.datepicker');
    });
</script>
{/block}
